<template>
  <div class="shop-balance">
    <div class="shop-balance-info">
      <div class="can-use">
        <p>可用店铺余额 
          
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>可用店铺余额=店铺余额-不可用店铺余额</span>
            </template>
            <a-icon class="icon-gray" type="question-circle" />
          </a-tooltip>
          
        </p>
        <p>
          <!-- <span class="balance">{{shopInfo.balanceAvailable | $number2Price}}</span> -->
          <a-statistic style="display:inline-block; margin-right: 20px" :precision="2" :value="shopInfo.balanceAvailable | $number2Price" />
          
          <a-button disabled title="敬请期待">提现</a-button>
          <span> 可提现金额
            <a-statistic style="display:inline-block" :precision="2" :value="shopInfo.balanceCash | $number2Price" >
            </a-statistic>
          </span>
        </p>
      </div>
      <div class="wait-settlement">
        <p>待结算(元)
          
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>交易未完成的订单总额，消费者确认收货后将自动转入店铺余额</span>
            </template>
            <a-icon class="icon-gray" type="question-circle" />
          </a-tooltip>
        </p>
        <p>
          <!-- <span class="balance">{{shopInfo.balanceUnsettle | $number2Price}}</span> -->
          <a-statistic :precision="2" :value="shopInfo.balanceUnsettle | $number2Price" />
        </p>
      </div>
      <div class="cannot-use">
        <p>不可用店铺余额(元)
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>提现中或者退款中的冻结店铺余额</span>
            </template>
            <a-icon class="icon-gray" type="question-circle" />
          </a-tooltip>
          <!-- 点击明细打开店铺余额/不可用余额页面 -->
          <a-button type="link" @click="openModal('unavailableBalanceVisible')">明细</a-button>
        </p>
        <p>
          <!-- <span class="balance">{{shopInfo.balanceUnavailable | $number2Price}}</span> -->
          <a-statistic :precision="2" :value="shopInfo.balanceUnavailable | $number2Price" />
        </p>
      </div>
    </div>
    <p class="shop-balance-record-title">
      <span>最近7天交易记录</span>
      <a-button type="link" @click="openModal('dealRecordVisible')">全部交易记录</a-button>
    </p>
    <div class="shop-balance-record">
      <a-tabs type="card" @change="tabChange">
        <a-tab-pane :key="0" tab="全部">
        </a-tab-pane>
        <a-tab-pane v-for="item in orderStatusList" :key="item.value" :tab="item.label">
        </a-tab-pane>
      </a-tabs>
      
      <search-table :defaultParams="defaultParams" :hideSelect="true" :url="recordUrl" ref="searchtable" :columns="columns"></search-table>
    </div>
    <deal-record :orderStatusList="orderStatusList" :visible="dealRecordVisible" @cancel="closeModal" />
    <unavailable-balance :visible="unavailableBalanceVisible" @cancel="closeModal" />
  </div>
</template>
<script>
import DealRecord from './components/DealRecord'
import UnavailableBalance from './components/UnavailableBalance'
import {mapGetters} from 'vuex'
export default {
  name: 'shop-balance',
  components: {
    DealRecord,
    UnavailableBalance
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data () {
    return {
      dealRecordVisible: false,// 交易记录弹窗
      unavailableBalanceVisible: false,// 不可用余额弹窗
      currentTab: 0,
      shopInfo: {},
      defaultParams: {
        status: ''
      },
      recordUrl: '',
      orderStatusList: [
        {value: '1', label: '已付款'},
        {value: '2', label: '已发货'},
        {value: '3', label: '退款'},
        {value: '4', label: '交易完成'},
        {value: '5', label: '交易关闭'},
      ],
      columns: [
        {title: '时间', dataIndex: 'createDate'},
        {title: '名称', dataIndex: 'fareName'},
        {title: '订单编号', dataIndex: 'id'},
        {title: '支付单号', dataIndex: 'shopId'},
        {title: '对方', dataIndex: 'createBy'},
        {title: '金额(元) | 明细', dataIndex: 'size'},
        {title: '状态', dataIndex: 'deleted'},
      ]
    }
  },
  mounted () {
    this.getShopInfo()
  },
  methods: {
    getShopInfo () {
      this.$get('/shop/queryById', {id: this.userInfo.shopId}).then(res => {
        if (res && res.returnCode === 1000) {
          this.shopInfo = res.dataInfo
        }
      })
    },
    closeModal (flag) {
      this.dealRecordVisible = false
      this.unavailableBalanceVisible = false
    },
    openModal (modal) {
      this[modal] = true
    },
    tabChange (key) {
      this.defaultParams.status = key == 0 ? '' : key
      this.$refs.searchtable.refreshTable()
    }
  }
}
</script>
<style lang="less" scoped>
.shop-balance {
  .shop-balance-info {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #f5f5f5;
    margin-bottom: 20px;
  }
  .shop-balance-record-title {
    margin-bottom: 20px;
    height: 40px;
    padding: 0 20px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .balance {
    font-size: 22px;
  }
  .icon-gray {
    
    color: #999;
    font-size: 14px;
  }
}
</style>